<template>
	<view class="shareVieWp">
		<!-- 转发预览 -->
		<view class="shareView">
			<view class="title">
				转发预览
			</view>
			<view class="shareViewMainWp">
				<view class="shareViewMain">
					<view class="shareTitle">
						{{shareTitle}}
					</view>
					<view class="shareImgWp">
						<view class="textBoxWp">
							<view class="nameText">{{selectInfo.name?selectInfo.name:''}}</view>
							<view class="titleText">
								<text>{{selectInfo.department?selectInfo.department:''}}</text>
								<text>{{selectInfo.title?selectInfo.title:''}}</text>
							</view>
							<view class="titleText">
								<text>{{selectInfo.phone?selectInfo.phone:''}}</text>
							</view>
							<view class="titleText">
								<text>{{selectInfo.company?selectInfo.company:''}}</text>
							</view>
						</view>
						<img class="shareImg" :src="shareImg" alt="">
					</view>
				</view>


			</view>
		</view>
		<!-- 转发设置 -->
		<view class="shareSetWp">
			<view class="setTitleWp">
				<view class="titleWp" @click="showTitleListPopup=true">
					<view class="title">
						转发标题
					</view>
					<view class="">
						>
					</view>
				</view>
				<view class="titleMain">
					<u-textarea placeholderClass="Mytextarea" v-model="shareTitle" auto-height></u-textarea>
					<!-- <textarea :value="shareTitle" auto-height /> -->
				</view>
			</view>
			<!-- 背景图片 -->
			<!-- 	<view class="setBgcWp">
				<view class="titleWp">
					<view class="title">
						转发背景
					</view>
				</view>
				<view class="bgMain">
					<img :src="shareImg" alt="">
				</view>
			</view> -->
	<!-- 		<view class="setContentWp">
				<view class="titleWp">
					<view class="title">
						转发内容
					</view>
				</view>
				<view class="btnWp">
					<view class="btnItem" v-for="(item,index) in btnList" :key="index">
						<u-button @click="select(item,index)" type="default" :plain="true" size="mini" shape="circle"
							:color="item.isSelect?'#423CFE':'#666666'">{{item.text}}
						</u-button>
					</view>
				</view>
			</view> -->

		</view>
		<!-- 下方按钮 -->
		<view class="submitBtnWp">
			<view class="btnWp">
				<view class="submitBtn">
					<u-button @click="reset" type="default" size="normal"  color='#999999'>重置</u-button>
				</view>
				<view class="submitBtn">
					<u-button @click="submit" type="default" size="normal" color='#423CFE'>确认</u-button>
				</view>

			</view>

		</view>
		<!-- 弹窗 -->
		<u-popup :show="showTitleListPopup" :round="30" @close='closeTitleList' mode="bottom"
			:closeOnClickOverlay='true' closeable>

			<view class="shareTitleListWp">
				<view class="shareTitleWp">
					<view class="item" v-for="(item,index) in shareTitleList" :key="index"
						@click="chooseShareTitle(item)">
						{{item}}
					</view>

				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				shareTitle: '相逢即是有缘，有缘自会相逢。您好!',
				shareImg: 'https://file.casugn.com/storecompcard/temp/图层 1@2x (1)_1655715362639.png',
				btnList: [{
						text: '姓名',
						isSelect: false
					},
					{
						text: '职位',
						isSelect: false
					},
					{
						text: '部门',
						isSelect: false
					},
					{
						text: '手机号',
						isSelect: false
					},
					{
						text: '企业名称',
						isSelect: false
					},
				],
				showInfo: {},
				//介绍文案
				shareTitleList: [
					'相逢即是有缘，有缘自会重逢。您好，很高兴能认识您。',
					'你好，朋友。这是我的名片，请惠存。谢谢。',
					'朋友您好，很高兴认识你，可以的话我们互换名片，互相认识一下。',
					'您好，这是我的名片，可以打开、收藏、同步通讯录、随时联系，请您惠存。',
					'有缘千里来相会，你好，朋友。这是我的名片，可以打开收藏哦，欢迎随时联系。'
				],
				showTitleListPopup: false,
				selectInfo: {}
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			select(item, index) {
				this.btnList[index].isSelect = !this.btnList[index].isSelect
				//将选中的标签代表的信息收集到selectInfo
				if (this.btnList[index].isSelect) {
					switch (index) {
						//姓名
						case 0:
							this.selectInfo.name = this.userInfo.name ? this.userInfo.name : ''
							break;
							//职位
						case 1:
							this.selectInfo.title = this.userInfo.title ? this.userInfo.title : ''
							break;
							//部门
						case 2:
							this.selectInfo.department = this.userInfo.department ? this.userInfo.department : ''
							break;
							//手机号
						case 3:
							this.selectInfo.phone = this.userInfo.phone ? this.userInfo.phone : ''
							break;
							//企业
						case 4:
							this.selectInfo.company = this.userInfo.company ? this.userInfo.company : ''
							break;
					}

				} else {
					switch (index) {
						//姓名
						case 0:
							this.selectInfo.name = ''
							break;
							//职位
						case 1:
							this.selectInfo.title = ''
							break;
							//部门
						case 2:
							this.selectInfo.department = ''
							break;
							//手机号
						case 3:
							this.selectInfo.phone = ''
							break;
							//企业
						case 4:
							this.selectInfo.company = ''
							break;
					}
				}
				console.log(this.selectInfo);
			},
			reset() {
				this.$nextTick(() => {
					this.selectInfo = {
						name: '',
						company: '',
						phone: '',
						department: '',
						title: ''
					}
					this.btnList = [{
							text: '姓名',
							isSelect: false
						},
						{
							text: '职位',
							isSelect: false
						},
						{
							text: '部门',
							isSelect: false
						},
						{
							text: '手机号',
							isSelect: false
						},
						{
							text: '企业名称',
							isSelect: false
						},
					]
				})
			},
			submit() {
				let payload = {
					title: this.shareTitle,
					img: this.shareImg
				}
				//设置转发标题
		       uni.setStorageSync('shareInfo',payload)

			},
			closeTitleList() {
				this.showTitleListPopup = false
			},

			chooseShareTitle(item) {
				this.shareTitle = item
				this.showTitleListPopup = false
			},
			//文本框确认
			textareaConfirm(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss">
	::v-deep .Mytextarea {
		margin: 30upx;
		padding: 30upx;
		background-color: #F8F9FF;
		font-size: 26upx;
		font-weight: 400;
		line-height: 60upx;
		color: #333333;
	}

	.shareTitleListWp {
		margin: 80upx 40upx;

		.shareTitleWp {
			.item {
				padding: 10upx 0;
				font-size: 26upx;
				font-weight: 400;
				color: #333333;
				line-height: 40upx;
				border-bottom: 1upx solid #ccc;

				&:last-child {
					border-bottom: none
				}
			}
		}
	}

	.shareVieWp {
		height: 100vh;
		background-color: #F8F9FF;
		padding-bottom: 1upx;

		.shareView {
			padding: 30upx;

			.title {
				font-size: 24upx;
				font-weight: 400;
				color: #000000;
			}

			.shareViewMainWp {
				border-radius: 20upx;
				width: 480upx;
				margin: 20upx auto;
				background-color: #fff;
				padding: 20upx;
				display: flex;
				justify-content: center;

				.shareViewMain {
					width: 100%;
					padding-bottom: 30upx;
					border-bottom: 1upx solid #eee;
					margin-bottom: 20upx;

					.shareTitle {
						width: 100%;
						font-size: 24upx;
						font-weight: 400;
						color: #333333;
						line-height: 60upx;
						text-overflow: ellipsis;
						-webkit-line-clamp: 2;
						/* 控制要显示的行数 */
						display: -webkit-box;
						/* 弹性盒子元素垂直排列 */
						overflow: hidden;
						-webkit-box-orient: vertical; //设置弹性盒子垂直排列
					}

					.shareImgWp {
						margin-top: 30upx;
						width: 100%;
						height: 300upx;
						position: relative;

						.textBoxWp {
							bottom: 0;
							position: absolute;
							z-index: 2;
							background-color:#8c8d8c;
							color: #F8F9FF;
							padding-left: 20upx;
							box-sizing: border-box;
							opacity: 0.8;
                            width: 100%;
							.nameText {
								font-size: 26upx;
							}

							.titleText {
								font-size: 24upx;
							}
						}

						.shareImg {
							position: absolute;
							z-index: 1;
							width: 100%;
							height: 300upx;
						}
					}
				}
			}

		}

		.shareSetWp {
			background-color: #fff;

			.setTitleWp {
				border-radius: 30upx;
				padding-top: 3upx;

				.titleWp {
					margin: 30upx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title {
						font-size: 26upx;
						font-weight: 400;
						color: #000000;
					}
				}

				.titleMain {
					margin: 30upx;
					padding: 30upx;
					background-color: #F8F9FF;
					font-size: 26upx;
					font-weight: 400;
					color: #333333;
				}
			}

			.setBgcWp {
				.titleWp {
					margin: 30upx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title {
						font-size: 26upx;
						font-weight: 400;
						color: #000000;
					}
				}

				.bgMain {
					text-align: center;
					margin: 30upx auto;
					width: 440upx;
					height: 300upx;

					img {
						width: 100%;
						height: 100%;
					}
				}
			}

			.setContentWp {
				.titleWp {
					margin: 30upx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title {
						font-size: 26upx;
						font-weight: 400;
						color: #000000;
					}
				}

				.btnWp {
					margin: 30upx;
					display: flex;
					flex-wrap: wrap;

					.btnItem {
						padding: 0 10upx;
						margin-right: 20upx;
						margin-bottom: 40upx;
						width: 25%;
					}
				}
			}
		}

		.submitBtnWp {
			// background-color: #fff;
			margin: 30upx;
			overflow: hidden;

			.btnWp {
				display: flex;
				justify-content: space-around;
				align-items: center;

				.submitBtn {
					margin: 30upx;
					flex: 1;

					&:nth-child(2) {
						margin-left: 0upx;
					}
				}
			}
		}
	}
</style>
